<template>
  <div>
    <!--    <div class="header">-->
    <!--      <el-image class="header_logo" :src="logoUrl">-->
    <!--        <div slot="error" class="image-slot">-->
    <!--          <i class="el-icon-picture-outline"></i>-->
    <!--        </div>-->
    <!--      </el-image>-->
    <div class="header">
      <div style="top:10px; height:70px;background-color: rgb(244, 244, 244);">
        <!--        <section data-v-007fac91="" class="container hero-top">-->
        <div class="header_logo">
          <el-image :src="logoUrl" fit="fill"/>
        </div>
        <div class="header_subtitle">
          <span style="font-size: 30px">| 知识图谱</span>
          <span>(内部)</span>
        </div>
        <p class="header_warning">此系统为非涉密应用系统，禁止处理传输涉密信息。</p>
        <!--        </section>-->
      </div>
      <div style="background: #278ff0;">
        <el-menu :default-active="activeIndex"
                 mode="horizontal"
                 @select="handleSelect"
                 style="margin-left: 7%"
                 background-color="#278ff0"
                 text-color="white"
                 active-text-color="">
          <el-menu-item index="1">
            <!--          <i class="el-icon-menu"></i>-->
            <span slot="title">总体</span>
          </el-menu-item>
          <el-menu-item index="2">
            <!--          <i class="el-icon-document"></i>-->
            <span slot="title">压气机</span>
          </el-menu-item>
          <el-menu-item index="3">
            <!--          <i class="el-icon-setting"></i>-->
            <span slot="title">燃烧</span>
          </el-menu-item>
        </el-menu>

        <!--        <gSearch class="header_search"/>-->
        <div class="header_search">
          <el-input placeholder="请输入搜索内容" clearable v-model="input" class="input-with-select" style="width:500px">
            <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
          </el-input>
        </div>
      </div>

    </div>
    <!--    </div>-->
    <div class="body">
      <el-divider>知识图谱</el-divider>
      <div class="gContainer">
        <div class="chart_graph">
          <!--        <chartTree :data="treeData" ref="tree"></chartTree>-->
          <chartGraph :data="activeIndex" :other-tech.sync="tech" :path="path" ref="tree"></chartGraph>
        </div>
      </div>
      <el-divider>图表</el-divider>
      <div class="chart_barHor">
        <div>机构发文数量</div>
        <chartBarHorizontal :data="barData"></chartBarHorizontal>
      </div>
      <div class="chart_line">
        <div>技术点文献数量</div>
        <chartLine :legend="lineLegend" :xAxis="lineTimes"
                   :series="lineData"></chartLine>
      </div>
    </div>
  </div>

</template>

<script>

import chartBarHorizontal from '@/components/chartBarHorizontal'
import chartLine from '@/components/chartLine'
import chartGraph from '@/components/chartGraph'

export default {
  name: 'paper2',
  inject: ['reload'],
  components: {
    // graphClick,
    chartBarHorizontal,
    // eslint-disable-next-line vue/no-unused-components
    chartLine,
    // eslint-disable-next-line vue/no-unused-components
    chartGraph
  },
  computed: {},
  data () {
    return {
      // d3jsonParser()处理 json 后返回的结果
      type: '总体',
      typeMap: {
        1: '总体',
        2: '压气机',
        3: '燃烧'
      },
      path: '',
      logoUrl: require('@/assets/logo.png'),
      input: '',
      data: {
        nodes: [],
        links: []
      },

      activeIndex: '',
      activeToGraph: '',
      tech: {},
      institution: [],
      pubnum: [],
      barData: [],

      lineData: [],
      lineLegend: [],
      lineTimes: []

      // data_val: [1, 2, 3, 40, 213, 123, 43, 2],
      // yAxis: ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8'],
      // chart_two_data: [{
      //   value: 1048,
      //   name: '火影'
      // }, {
      //   value: 735,
      //   name: '海贼'
      // }, {
      //   value: 580,
      //   name: '死神'
      // }, {
      //   value: 484,
      //   name: '龙珠'
      // }, {
      //   value: 300,
      //   name: '幽游白书'
      // }, {
      //   value: 300,
      //   name: '猫和老鼠'
      // }
      // ],
      // four_legend_data_one: ['火影', '海贼', '死神', '龙珠', '葫芦娃'],
      // four_xAxis_data: ['2020/0/01', '2020/0/02', '2020/0/03', '2020/0/04', '2020/0/05', '2020/0/06',
      //   '2020/0/07'
      // ],
      // four_series_data: [{
      //   name: '火影',
      //   type: 'line',
      //   stack: '工单总量',
      //   data: [120, 132, 101, 134, 90, 230, 210]
      // }, {
      //   name: '海贼',
      //   type: 'line',
      //   stack: '工单总量',
      //   data: [120, 132, 101, 134, 90, 230, 210]
      // }, {
      //   name: '死神',
      //   type: 'line',
      //   stack: '工单总量',
      //   data: [120, 132, 101, 134, 90, 230, 210]
      // }, {
      //   name: '龙珠',
      //   type: 'line',
      //   stack: '工单总量',
      //   data: [120, 132, 101, 134, 90, 230, 210]
      // }, {
      //   name: '葫芦娃',
      //   type: 'line',
      //   stack: '工单总量',
      //   data: [120, 132, 101, 134, 90, 230, 210]
      // }]

    }
  },
  mounted () {
    console.log('paper2:', this.$route)
    if (JSON.stringify(this.$route.query) === '{}') {
      this.$message.error('跳转参数错误')
    } else {
      this.type = this.$route.query.type
      this.path = this.$route.query.path
      if (this.type === '压气机') {
        this.activeIndex = '2'
      } else if (this.type === '燃烧') {
        this.activeIndex = '3'
      } else {
        this.activeIndex = '1'
      }

      this.$message.success('加载数据中...')
      if (JSON.stringify(this.tech) !== '{}') {
        this.initPage()
      }
    }
  },
  methods: {
    initPage () {
      this.institution = this.tech.institution
      this.pubnum = this.tech.pubnum

      this.barData = []
      this.institution.forEach((item, index) => {
        this.barData.push([item, this.pubnum[index]])
      })

      this.lineTimes = this.tech.lineTimes
      this.lineLegend = this.tech.lineLegend
      this.lineData = []
      this.tech.lineData.forEach(item => {
        this.lineData.push({
          name: item.name,
          type: 'line',
          data: item.date
        })
      })
    },
    clickShow (dom) {
      dom.dispatchAction({
        type: 'downplay'
      })
      // 默认设置第一个值得区域高亮
      dom.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })
      dom.on('click', e => {
        // 这里执行点击后的操作
        console.log('点击触发', e)
      })
      dom.on('mouseover', e => {
        // 关闭高亮
        dom.dispatchAction({
          type: 'downplay'
        })
        // 设置当前进入的区域内容高亮
        dom.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: e.dataIndex
        })
      })
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
      this.activeIndex = keyPath[0]
    },
    onSearch () {
      this.$router.push({
        path: '/search',
        query: {
          keyword: this.input
        }
      })
    }
  },
  watch: {
    tech: {
      handler () {
        if (JSON.stringify(this.tech) !== '{}') {
          this.initPage()
        }
      }
    },
    activeIndex: {
      handler () {
        console.log('paper2 change map')
        this.$router.replace({
          path: '/paper2',
          query: {
            type: this.typeMap[this.activeIndex],
            path: this.path
          }
        })
        this.reload()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 140px;
  left: 0;
  top: 0;
  position: absolute;
  line-height: 70px;
  width: 100%;
}

.header_logo {
  position: absolute;
  left: 5%;
  // padding: 4px 28px 0 30px;
  //top: 1px;
  width: 23%;
  //top:0;
  //bottom: 10px;
}

.header_subtitle {
  position: absolute;
  left: 29%;
  font-family: "Arial Black";
  font-size: large;
  color: #006699;
}

.header_warning {
  position: absolute;
  right: 10%;
  font-family: "Arial Black";
  font-size: small;
  color: crimson;
}

.header_select {
  position: absolute;
  // padding: 4px 28px 0 30px;
  top: 66px;
}

.header_search {
  position: absolute;
  right: 0px;
  //padding: 4px 28px 0 30px;
  top: 65px;
}

.body {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
}

.gContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chart_graph {
  border: 1px solid #ededed;
  width: calc((100% - 30px) * 0.9);
  height: 800px;
  margin: 0 10px 10px 0;
  float: left;
}

.chart_graph:nth-child(3n) {
  margin-right: 0;
}

.el-menu-item.is-active {
  background: #336699 !important;
  color: #fff !important;
}

.chart_barHor {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
  float: left;
}

.chart_barHor:nth-child(3n) {
  margin-right: 0;
}

.chart_line {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
  float: right;
}

.chart_line:nth-child(3n) {
  margin-right: 0;
}
</style>
